import React, {useCallback, useState} from 'react';
import {Modal, Layout, Form} from 'antd';
import EnvList from './EnvList';
import EnvForm from './EnvForm';
import './envStyle.scss';

/**
 * 环境设置
 */
const EnvSettingModel = (props) => {


    const [visible, setVisible] = useState(false);
    const [selectedEnvId, setSelectedEnvId] = useState(null);

    const showModal = () => {
        setVisible(true)
    };

    const hideModal = () => {
        setVisible(false)
    };

    const handleEnvSelect =useCallback((envId) => {
        setSelectedEnvId(envId);
    },[])

    return (
        <>
            <span onClick={showModal}>{props.name}</span>
            <Modal
                title="环境设置"
                open={visible}
                onCancel={hideModal}
                width={960}
                centered
                okText={'提交'}
                cancelText={'取消'}
                footer={null}
                destroyOnClose={true}
                className={'pi-env-setting-modal'}
            >
                <Layout className="pi-env-setting-layout">
                    <Layout.Sider width={200} className="env-list-sider">
                        <EnvList
                            selectedEnvId={selectedEnvId}
                            onSelect={handleEnvSelect}
                        />
                    </Layout.Sider>
                    <Layout.Content className="env-form-content">
                        <EnvForm envId={selectedEnvId} />
                    </Layout.Content>
                </Layout>
            </Modal>
        </>
    );
};

export default EnvSettingModel;
